<template>
  <section class="content_left friendPanner">
    <div class="actions">
      <Search />
      <SearchAddAction />
    </div>
    <div class="pannerContent">
      <div class="friendApply" @click="$emit('jump', '-2')">
        <span>朋友申请</span>
        <img src="local-media://arraw.png" alt="">
      </div>
      <div class="organizationApply" @click="$emit('jump', '-1')">
        <span>群申请</span>
        <img src="local-media://arraw.png" alt="" />
      </div>
      <el-collapse v-model="activeNames" v-for="(row, index) in activePanners" accordion>
        <el-collapse-item title="Consistency" :name="String(index)" :disabled="!row.show">
          <template #title>
            <el-affix :offset="108" :z-index="(index + 1)">
              <li class="panners">
                <img :src="row?.icon">
                <span class="panner_name">{{ row?.name }}</span>
                <span class="panner_nums">{{ row?.data?.length }}</span>
              </li>
            </el-affix>
          </template>
          <ul class="list">
            <li v-for="item in row?.data" @click="selectInfo(item)">
              <el-avatar :size="45" :src="item?.portrait" />
              <div class="info">
                <span class="userName">{{ item.remark || item?.nickName || item?.name }}</span>
              </div>
            </li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
  </section>
</template>
<script>
import SearchAddAction from '@/components/SearchAddAction.vue';
import { defineComponent, inject, reactive, computed, ref, watch } from 'vue';
import { InfoFilled } from '@element-plus/icons-vue'
import { RouterLink } from 'vue-router';
import Search from '@/components/Search.vue'
import { useStore } from 'vuex';
export default defineComponent({
  components: {
    [InfoFilled.name]: InfoFilled,
    RouterLink,
    Search,
    SearchAddAction
  },
  setup (props, { emit }) {
    const activeNames = ref()
    const store = useStore()
    const activePanners = computed(() => store.state.activePanners)
    watch(activeNames, (newValue, oldValue) => {
      if (newValue !== oldValue && newValue !== '') {
        store.dispatch('getFriendByType', { index: newValue })
      }
    })
    const searchValue = ref('')
    const selectInfo = (item) => emit('jump', item)
    return {
      activePanners,
      activeNames,
      searchValue,
      selectInfo,
    }
  }
})
</script>

<style scoped lang="less">
@import url('./styles.less');
</style>
